import React, { Component } from "react";
// todo 从react-redux解构出connect
// todo connect是一个函数，connect的返回值是一个高阶组件
// todo connect需要接收两个参数，这两个参数都是函数
import { connect } from "react-redux";

import Form from "./Form";
import List from "./List";

// todo 将仓库的state映射到组件的props里面
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};
// todo 将仓库的改变数据的方法映射到组件的props里面
const mapDispatchToProps = (dispatch) => {
  return {
    add(num) {
      dispatch({ type: "increment", num });
    },
    minus() {
      dispatch({ type: "decrement" });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  render() {
    // console.log(this.props);
    return (
      <>
        <h2>react-redux</h2>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={() => this.props.add(2)}>+2</button>
        <button onClick={() => this.props.add(3)}>+3</button>

        <hr />

        <Form />
        <List />
      </>
    );
  }
}

// export default connect(mapStateToProps, mapDispatchToProps)(App);
export default App;
